<template>
  <q-page>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card color="tertiary" dark class="q-ma-sm">
          <q-card-title>
            生产环境
            <span slot="subtitle" class="head_font">共有({{hostsNum.prd}})台服务器<br>
              已使用：物理机({{hostsNum.prdwlj}})+虚拟机({{hostsNum.prdxnj}})</span>
            <q-icon class="head_icon" slot="right" name="keyboard" />
          </q-card-title>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card color="secondary" dark class="q-ma-sm">
          <q-card-title>
            预生产环境
            <span slot="subtitle" class="head_font">共有({{hostsNum.pre}})台服务器<br>
              已使用：物理机({{hostsNum.prewlj}})+虚拟机({{hostsNum.prexnj}})</span>
            <q-icon class="head_icon" slot="right" name="router" />
          </q-card-title>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card color="primary" dark class="q-ma-sm">
          <q-card-title>
            测试环境
            <span slot="subtitle" class="head_font">共有({{hostsNum.sit}})台服务器<br>
              已使用：物理机({{hostsNum.sitwlj}})+虚拟机({{hostsNum.sitxnj}})</span>
            <q-icon class="head_icon" slot="right" name="tune" />
          </q-card-title>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <q-card color="warning" dark class="q-ma-sm">
          <q-card-title>
            开发环境
            <span slot="subtitle" class="head_font">共有({{hostsNum.dev}})台服务器<br>
              已使用：物理机({{hostsNum.devwlj}})+虚拟机({{hostsNum.devxnj}})</span>
            <q-icon class="head_icon" slot="right" name="airplay" />
          </q-card-title>
        </q-card>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <q-card class="q-ma-sm">
          <q-toolbar color="info">
            <q-toolbar-title>
              中间件状态
            </q-toolbar-title>
          </q-toolbar>
          <q-list highlight>
            <q-item v-for="(item, index) in middleWareStatus" :key="index">
              <q-item-main :label="item.title" />
              <q-item-side right>
                <q-item-tile inverted :icon="item.avatar" :color="item.color" />
              </q-item-side>
            </q-item>
          </q-list>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
        <mq-svg></mq-svg>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
        <sys-chart></sys-chart>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
        <pub-svg></pub-svg>
      </div>
    </div>
  </q-page>
</template>

<style scoped>
  .head_icon{
    font-size:96px;
    color:#fff;
  }
  .head_font{
    color: #ffffff;
  }
</style>

<script>
import dashboardModule from '../store/dashboard'
export default {
  preFetch ({ store }) {
    store.registerModule('dashboard', dashboardModule)
    Promise.all([
      store.dispatch('dashboard/loadHostsNum'),
      store.dispatch('dashboard/loadMiddleStatus')])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'PageIndex',
  data: function () {
    return this.$store.state.dashboard
  },
  components: {
    'mq-svg': () => import('./dashboard/mqSvg'),
    'pub-svg': () => import('./dashboard/pubSvg'),
    'sys-chart': () => import('./dashboard/sysChart')
  },
  beforeDestroy () {
    this.$store.unregisterModule('dashboard')
  }
}
</script>
